<template>
  <a-form
    ref="dialogFormRef"
    :form="dialogFormResp"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 18 }"
  >
    <a-form-item label="派遣类型">
      <a-select
        @change="handleChangePqType"
        placeholder="请选择派遣类型"
        style="width: 100%"
        v-decorator="[
          'pqType',
          { rules: [{ required: true, message: '请选择派遣类型' }] },
        ]"
      >
        <a-select-option v-for="d in dispatchTypeList" :key="d.value">
          {{ d.label }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
      label="派遣部门"
      v-if="
        ['0', '1', '2', '3', '4'].includes(
          dialogFormResp.getFieldValue('pqType')
        )
      "
    >
      <a-tree-select
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="treeData"
        placeholder="请选择派遣部门"
        tree-default-expand-all
        @change="handleChangeDept"
        v-decorator="[
          'deptId',
          { rules: [{ required: true, message: '请选择派遣部门' }] },
        ]"
      >
      </a-tree-select>
    </a-form-item>
    <!-- 跨区派遣 -->
    <a-form-item
      label="处理人"
      v-if="dialogFormResp.getFieldValue('pqType') === '4'"
    >
      <a-select
        placeholder="请选择指定处理人"
        style="width: 100%"
        v-decorator="[
          'userId',
          { rules: [{ required: true, message: '请选择指定处理人' }] },
        ]"
      >
        <a-select-option v-for="d in userList" :key="d.userId">
          {{ d.userName }}
        </a-select-option>
      </a-select>
    </a-form-item>

    <!-- 多部门派遣 -->
    <a-form-item
      v-if="dialogFormResp.getFieldValue('pqType') === '6'"
      v-for="(item, index) in partmentList"
      :key="index"
      :label="'派遣部门'"
    >
      <div class="flex-row gap-2">
        <a-tree-select
          style="width: calc(100% - 40px)"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="treeData"
          @change="(value, label) => onChangeAssist(value, label, index)"
          placeholder="请选择"
          :tree-default-expand-all="true"
          v-decorator="[
            `muiltDepartmentId${index}`,
            { rules: [{ required: true, message: '请选择派遣部门!' }] },
          ]"
        />
        <span
          v-if="index === 0"
          class="text-blue cursor-pointer"
          @click="handleAdd"
          >增加</span
        >
        <span
          v-if="index !== 0"
          class="text-red cursor-pointer"
          @click="() => handleRemove(index)"
          >删除</span
        >
      </div>
    </a-form-item>

    <!-- 双派遣 -->
    <a-form-item
      label="派遣部门"
      v-if="dialogFormResp.getFieldValue('pqType') === '7'"
    >
      <a-tree-select
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="treeData"
        placeholder="请选择派遣部门"
        tree-default-expand-all
        v-decorator="[
          'doubleDepartmentId1',
          { rules: [{ required: true, message: '请选择派遣部门' }] },
        ]"
      >
      </a-tree-select>
    </a-form-item>
    <a-form-item
      label="派遣部门"
      v-if="dialogFormResp.getFieldValue('pqType') === '7'"
    >
      <a-tree-select
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="treeData"
        placeholder="请选择派遣部门"
        tree-default-expand-all
        v-decorator="[
          'doubleDepartmentId2',
          { rules: [{ required: true, message: '请选择派遣部门' }] },
        ]"
      >
      </a-tree-select>
    </a-form-item>

    <!-- 主协办派遣 -->
    <a-form-item
      label="主办派遣部门"
      v-if="dialogFormResp.getFieldValue('pqType') === '8'"
    >
      <a-tree-select
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="treeData"
        placeholder="请选择主办派遣部门"
        tree-default-expand-all
        v-decorator="[
          'mianDepartmentId',
          { rules: [{ required: true, message: '请选择主办派遣部门' }] },
        ]"
      >
      </a-tree-select>
    </a-form-item>
    <a-form-item
      label="协办派遣部门"
      v-if="dialogFormResp.getFieldValue('pqType') === '8'"
    >
      <a-tree-select
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="treeData"
        placeholder="请选择协办派遣部门"
        tree-default-expand-all
        v-decorator="[
          'secondDepartmentId',
          { rules: [{ required: true, message: '请选择协办派遣部门' }] },
        ]"
      >
      </a-tree-select>
    </a-form-item>
  </a-form>
</template>
<script>
import dictMixin from "@/mixins/dictMixin";
export default {
  mixins: [dictMixin],
  data() {
    return {
      dialogFormResp: this.$form.createForm(this, { name: "coordinated" }),
      partmentList: [{ dispatchDepartmentId: "", dispatchDepartmentName: "" }], // 部门列表
      treeData: [], // 树形数据
      areaList: [],
      userList: [],
      commonType: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
    };
  },
  methods: {
    handleChangeDept(val) {
      // 只有当派遣类型为4时才调用获取用户列表的接口
      console.log(
        this.dialogFormResp.getFieldValue("pqType"),
        "this.dialogFormResp.getFieldValue('pqType')"
      );
      if (this.dialogFormResp.getFieldValue("pqType") === "4") {
        this.getUserListByDept(val);
      }
    },
    getUserListByDept(deptId) {
      this.$axios
        .get("/government-platform-center/dept/getUserListByDeptId", {
          params: { deptId },
        })
        .then((res) => {
          if (res.data.code === 0) {
            this.userList = res.data.data;
          }
        });
    },
    // 根据派遣类型来获取其他数据
    handleChangePqType(val) {
      // 获取部门树数据
      this.getDeptTree();

      // 如果派遣类型为4，需要获取用户列表
      if (val === "4") {
        const deptId = this.dialogFormResp.getFieldValue("deptId");
        if (deptId) {
          this.getUserListByDept(deptId);
        }
      }
    },
    async getDeptTree() {
      await this.$axios
        .get("/government-platform-center/dept", {
          params: { current: 1000, offset: 1 },
        })
        .then((res) => {
          if (res.data.code === 0) {
            const targetData = this.transformTreeData(res.data.data || []);
            this.treeData = targetData;
          }
        });
    },
    transformTreeData(data) {
      function transformNode(node) {
        return {
          value: node.id,
          title: node.thisData.deptName,
          parentId: node.parentId,
          children: (node.childList || []).map(transformNode),
          ...node.thisData, // 将其他属性也保留下来
        };
      }

      return data.map(transformNode);
    },

    // 获取表单值
    getFormValues() {
      return new Promise((resolve, reject) => {
        this.dialogFormResp.validateFields((err, values) => {
          if (!err) {
            resolve(values);
          }
        });
      });
    },
    onChangeAssist(value, label, index) {
      // 处理部门选择变化
    },
    handleAdd() {
      this.partmentList.push({});
    },
    handleRemove(index) {
      this.partmentList.splice(index, 1);
    },
  },
};
</script>
<style scoped>
.flex-row {
  display: flex;
  align-items: center;
}
.gap-2 {
  gap: 8px;
}
.items-center {
  align-items: center;
}
.text-blue {
  color: #4285f4;
}
.text-red {
  color: #ff4d4f;
}
.cursor-pointer {
  cursor: pointer;
}
</style>
